<template>
	<view class="tabs">
		<view class="tab">
			<view 
				class="tab-item" 
				v-for="(item,index) in tabbarList" 
				:key='index' 
				@tap="changeTab(item.pagePath)"
			>
				<image 
					class="tab-img" 
					:src="item.pagePath == currentPath? item.selectedIconPath:item.iconPath" 
					mode=""
				></image>
				<text 
					class="tab-name" 
					:class="item.pagePath == currentPath ? 'seleceted':''"
				>{{item.text}}</text>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		props: {
			'currentPath': {
				type: String,
				default: 'home'
			}
		},
		data() {
			return {
				tabbarList: [{
					pagePath: "home",
					iconPath: "../../static/icons/home.png",
					selectedIconPath: "../../static/icons/home_select.png",
					text: "首页"
				}, {
					pagePath: "list",
					iconPath: "../../static/icons/classify.png",
					selectedIconPath: "../../static/icons/classify_select.png",
					text: "分类"
				}, {
					pagePath: "study",
					iconPath: "../../static/icons/study.png",
					selectedIconPath: "../../static/icons/study_select.png",
					text: "学习"
				}, {
					pagePath: "mine",
					iconPath: "../../static/icons/me.png",
					selectedIconPath: "../../static/icons/me_select.png",
					text: "我的"
				}]
			}
		},
		onShow() {
			uni.hideTabBar();
		},
		methods: {
			changeTab(path) {
				uni.switchTab({
					url: '/pages/' + path + '/' + path + ''
				})
			}
		}

	}
</script>

<style scope lang="scss">
	.tabs {
		width: 100vw;
		height: 140rpx;
	}
	/* tabbar */
	.tab {
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100vw;
		height: 140rpx;
		border-top: 2rpx solid #eee;
		background-color: #FFFFFF;
		/* padding-bottom: 20rpx; */
	}

	.tab-item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.tab-img {
		width: 42rpx;
		height: 42rpx;
	}

	.tab-name {
		padding-top: 8rpx;
		font-size: 24rpx;
	}

	.seleceted {
		color: rgba(62, 139, 248, 1);
	}
</style>
